<template>
    <div style="height: 95%;width: 100%;display:flex;justify-content:center;padding-top: 20px">
        <!--弹框DIV 设置弹框的大小的地方-->
        <div style="background: #fff;width: 700px;height: 600px;box-shadow: #D3DCE6 0px 0px 20px;">
            <div style="height:520px;border: #1C84C6;margin-top: 25px" class="scrollbar">
                <div style="height: 30px;">
                    <!--标题-->
                    <span style="font-size: 18px;margin-left: 25px;">
                        新建产品
                    </span>
                    <!--返回列表-->
                    <router-link style="margin-left: 530px;" :to="{path:'/qprom'}">
                        <span>
                            <i slot="suffix" style="font-size: 30px;color: #D3DCE6" class="el-icon-close"></i>
                        </span>
                    </router-link>
                </div>
                <!--height:91%;表单在弹框显示多长-->
                <el-scrollbar style="height:91%;padding-top: 20px;">
                    <div class="shugan"></div>
                    <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                    <br/>
                    <br/>
                    <!--表单-->
                    <el-form style="margin-top:5px;margin-left: 40px;" size="mini" :model="addform" :rules="empRule" ref="emp">
                        <el-row>
                            <el-col :span="11">
                                <el-form-item style="width:250px;">
                                    <label slot="label" style="font-size: 13px" >产品编号：</label><br/>
                                    <el-input v-model="addform.prodetailBh" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px">
                                    <label slot="label" style="font-size: 13px">产品类型：</label><br/>
                                    <el-select v-model="addform.typeId"
                                               placeholder="请选择"
                                               value-key="typeName"
                                               style="width: 250px"
                                               @change="changebusni">
                                        <el-option
                                                v-for="item in leixing"
                                                :key="item.typeId"
                                                :label="item.typeName"
                                                :value="item.typeId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item style="width:250px">
                                    <label slot="label" style="font-size: 13px">产品名称：</label><br/>
                                    <el-input v-model="addform.productName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:300px">
                                    <div class="block">
                                        <span class="demonstration" style="font-size: 13px">产品规格：</span>
                                        <el-cascader
                                                v-model="addform.guigezhi"
                                                :options="options"
                                                :props="{value:'modelId',children:'qlianji',label:'modelName', multiple: true, checkStrictly: true}"
                                                style="width: 250px;"
                                        ></el-cascader>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item style="width:250px">
                                    <label slot="label" style="font-size: 13px">产品进价：</label><br/>
                                    <el-input  v-model="addform.prodetaiJpri"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px">
                                    <label slot="label" style="font-size: 13px">产品售价：</label><br/>
                                    <el-input v-model="addform.prodetailSpri"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item style="width:250px">
                                    <label slot="label" style="font-size: 13px">产品库存：</label><br/>
                                    <el-input v-model="addform.prodetailKcnum"></el-input>
                                </el-form-item>
                            </el-col>
                            <!--图片-->
                            <el-col :span="8">
                                <el-form-item style="width:250px;">
                                    <label slot="label" style="font-size: 13px">产品图片：</label><br/>
                                    <el-upload
                                            class="avatar-uploader"
                                            action=""
                                            :show-file-list="false"
                                            :http-request="uploadImg"
                                            :on-change="handlePreview"
                                            :auto-upload="true">
                                        <img v-if="addform.picturePath" :src="addform.picturePath" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="19">
                                <el-form-item>
                                    <label slot="label" style="font-size: 13px">备注：</label><br/>
                                    <textarea style="width: 250px;"></textarea>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <!--商品弹框-->
                </el-scrollbar>
                <!--确定按钮 设置了固定定位-->
                <div style="text-align: center;width: 80%;position: absolute;top:635px;left:230px;" class="dialog-footer">
                    <!--返回列表-->
                    <router-link :to="{path:'/qprom'}" >
                        <el-button @click="jilutankuan = false" style="margin-right:50px;">取 消</el-button>
                    </router-link>

                    <el-button type="primary" @click="xinzen" >确 定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    var formData = new FormData();
    export default {
        name: "Qtianjia",
        data() {
            return {
                mytype:'',
                value7:'',
                addform:{
                    typeId:'',
                    picturePath:'',
                    guigezhi:[]
                },
                leixing:{
                },
                props: { multiple: true },
                options: {

                },
            };
        },
        methods:{
            changebusni(){
                this.guige(this.addform.typeId);
            },
            //商品类型
            guigee(){
                this.$axios.get("http://localhost:8088/par/gougou-list").then(v=>{
                    this.leixing=v.data;
                }).catch();
            },
            //图片上传
            handlePreview(file) {
                window.console.log(file.raw);
                this.addform.picturePath = URL.createObjectURL(file.raw);
                window.console.log(this.addform.picturePath)
            },
            uploadImg(params){
                formData.append("file",params.file);
                this.$axios.post("http://localhost:8088/upload",
                    formData)
                    .then(v=>{
                        window.console.log(v.data);
                    }).catch();
            },
            //规格
            guige(){
                this.$axios.post("http://localhost:8088/pur/xinzenggg-list",this.qs.stringify({
                    value7:this.addform.typeId})).then(v=>{
                    this.options=v.data;
                }).catch();
            },
            /*初始化商机编号*/
            initbusNo(){
                var date = new Date();
                var year = date.getFullYear();
                var month = date. getMonth() + 1;
                var day = date.getDate();
                if (month < 10) {
                    month = "e" + month;
                }
                if(day<10){
                    day = "0" + day;
                }
                //使用年月日作为中问数
                var busnosj = year + month + day;
                //使用时间戳作为最后四位随机数
                var a = date.getTime() + "";
                var b = a.substring(9, 13);
                //最后编号
                var prodetailBh = "S_"+ busnosj +"_"+ b;
                this. addform.prodetailBh= prodetailBh;
            },
            xinzen(){
                this.$axios.post("http://localhost:8088/pur/xinz-chanp",
                    this.addform).then(()=>{
                    this.$notify({
                        title:'成功',
                        message: '新增成功！',
                        type: 'success'
                    });
                    window.console.log("sss"+this.addform.modetId)
                }).catch();
            }
        },
        created() {
            this.initbusNo();
            this.guigee();
            this.guige();
        }
    }
</script>

<style scoped>
    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 1.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
        margin-left: 25px;
    }
    /deep/ .el-scrollbar__wrap {
        overflow: scroll;
        width: 120%;
        height: 100%;
    }


    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>